import React from 'react';
import API from "../../api/api";
import {Button, DatePicker, Form, Input, Select, Spin, Statistic, Table} from "antd";
import {config} from "../../util/config";
const { RangePicker } = DatePicker;
const { Option } = Select;
export default class ModuleLog extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            current:1,
            spinFlag:false,
            data:[],
            pageSize:10,
        }
        let result = API.getUserAccessLog();
        this.state.data = result.data;
        this.state.count = result.count;
    }
    /**
     "LOG_ID": 12.0,
     "LOG_TARGET_TYPE": "folder-d",
     "LOG_TARGET_ID": 1123.0,
     "LOG_TARGET_NAME": "活动预告",
     "LOG_USER_NAME": "宋亞輝(K007-資訊中心)",
     "LOG_CREATE_BY": null,
     "LOG_CREATE_DATE": "2021-06-01T12:42:32",
     "IS_DELETE": "N",
     "LOG_USER_IP": "172.18.133.56"
     */
    columns = [
        {
            title: '模塊名稱',
            dataIndex: 'LOG_TARGET_NAME',
            key: 'LOG_TARGET_NAME',
            ellipsis:true,
            width:350,
        },
        {
            title: '模塊ID',
            dataIndex: 'LOG_TARGET_ID',
            ellipsis:true,
            width:180,
            key: 'LOG_TARGET_ID'
        },
        {
            title: '類型',
            dataIndex: 'LOG_TARGET_TYPE',
            ellipsis:true,
            key: 'LOG_TARGET_TYPE',
            width:180,
            render:(text)=>{
                return text=="folder-d"?config.folder_d:text=="page"?config.page:text=="file-d"?config.file_d:text=="article-d"?config.article_d:text=="folder"?config.folder:text=="article"?config.article:text=="file"?config.file:null
            }
        },
        {
            title: '用戶名稱',
            dataIndex: 'LOG_USER_NAME',
            key: 'LOG_USER_NAME',
            width:260,
            ellipsis:true,
        },
        {
            title:'用戶工號',
            dataIndex: 'LOG_PERSON_NO',
            ellipsis:true,
            key:'LOG_CREATE_BY'
        },
        {
            title: "用戶IP",
            dataIndex: 'LOG_USER_IP',
            ellipsis:true,
            key: 'LOG_USER_IP'
        },
        {
            title: "訪問时间",
            dataIndex: 'LOG_CREATE_DATE_FORMAT',
            ellipsis:true,
            key: 'LOG_CREATE_DATE'
        },
    ]

    type = "all";
    searchKey = "";
    personNo = "";
    startDate = "";
    endDate = "";
    startDate2 = "";
    endDate2 = "";

    //表单对象
    formRef = React.createRef();

    onReset = () => {
        this.formRef.current.resetFields();
    };

    onFinish = (item) =>{
        debugger
        if(item.moduleName!=undefined){
            this.searchKey = item.moduleName;
        }
        if(item.personNum!=undefined){
            this.personNo = item.personNum
        }
        if(item.type!=undefined){
            this.type = item.type.value
        }
        this.startDate2 = this.startDate
        this.endDate2 = this.endDate

        this.setState({spinFlag:true},()=>{
            setTimeout(()=>{
                let result = API.getUserAccessLog(this.type,this.searchKey,this.personNo,this.startDate2,this.endDate2,1,this.state.pageSize)
                this.setState({current:1,data:result.data,count:result.count,spinFlag:false})
            },100)
        })
        console.log(item)
    }

    onChange=(moment,string)=>{
        this.startDate=string[0];
        this.endDate=string[1];
        // this.getDataByCondition(this.searchKey,this.startDate,this.endDate);
    }

    onShowSizeChange(current, pageSize) {
        this.setState({pageSize:pageSize})
        this.changePage(1,pageSize)
    }

    changePage(current,pageSize){
        let searchKey = this.searchKey;
        let type = this.type;
        let personNum = this.personNo;
        let startDate = this.startDate2;
        let endDate = this.endDate2;
        let result = API.getUserAccessLog(type,searchKey,personNum,startDate,endDate,current,pageSize);
        this.setState({data:result.data,count:result.count,current:current});
    }

    paginationProps =_=> {
        const total = this.state.count
        const pageSize = this.state.pageSize
        return {
            current:this.state.current,
            showSizeChanger: true,//设置每页显示数据条数
            showQuickJumper: false,
            // showTotal: () => `共${this.state.count}条`,
            pageSize: pageSize,
            total: total,  //数据的总的条数
            onChange: (current) => this.changePage(current,pageSize), //点击当前页码
            onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
                console.log(pageSize);
                this.onShowSizeChange(current, pageSize)
            }
        }
    }

    render() {
        return <Spin spinning={this.state.spinFlag} tip="loading...">
            <div style={{marginBottom:"1rem" }}>
                <Form
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    onReset={this.onReset}
                    style={{display:"inline"}}
                    layout={"inline"}
                >
                    <Form.Item
                        name="accessNum"
                        label="訪問記錄"
                        style={{display:"inline"}}
                    >
                        共{this.state.count}筆數據
                    </Form.Item>
                    <Form.Item
                        name="dateBorder"
                        label="時間範圍"
                        style={{display:"inline"}}
                    >
                        <RangePicker allowClear showTime style={{ width: 220 }} onChange={this.onChange}/>
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="類型"
                        style={{display:"inline"}}
                    >
                        <Select
                            labelInValue
                            defaultValue={{ value: 'all' }}
                            style={{ width: 120 }}
                        >
                            <Option value="all">所有</Option>
                            <Option value="folder-d">{config.folder_d}</Option>
                            <Option value="file-d">{config.file_d}</Option>
                            <Option value="article-d">{config.article_d}</Option>
                            <Option value="file">{config.file}</Option>
                            <Option value="folder">{config.folder}</Option>
                            <Option value="article">{config.article}</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="moduleName"
                        label="模塊名稱"
                        style={{display:"inline"}}
                    >
                        <Input allowClear style={{ width: 120 }} />
                    </Form.Item>
                    <Form.Item
                        name="personNum"
                        label="用戶工號"
                        style={{display:"inline"}}
                        // rules={[
                        //     ({ getFieldValue }) => ({
                        //         validator(_, value) {
                        //             if (!isNaN(value)||value==undefined||value=="") {
                        //                 return Promise.resolve();
                        //             } else{
                        //                 return Promise.reject(new Error('工號格式不符'));
                        //             }
                        //         },
                        //     }),
                        // ]}
                    >
                        <Input allowClear style={{ width: 120 }}/>
                    </Form.Item>
                    <Form.Item
                        label="查詢"
                        name="commit"
                        style={{display:"inline"}}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <Table  columns={this.columns} dataSource={this.state.data}  scroll={{x: '80vw'}}  pagination={this.paginationProps()} style={{marginRight:"2rem"}}/>
        </Spin>
    }
}
